<template>
<div>
    <headTop></headTop>
    <el-card>
        <el-button type="primary" @click="handleAddClick">添加</el-button>
    </el-card>
    <div>

        <el-table :data="options" border @row-click="clickTable" ref="refTable" style="width: 100%">

            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-table :data="props.row.children" :show-header="false" style="width: 100%;">
                        <el-table-column type="index">
                        </el-table-column>
                        <el-table-column prop="name">
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <el-button @click.native.stop="handleEditClick(scope.row,props.row)" type="text" size="small">编辑</el-button>
                                <el-button @click.native.stop="handleDeleteClick(scope.row)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="类名">
                <template slot-scope="scope">
                    <div style="font-size:14px;font-weight:bold;">{{scope.row.name}}</div>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleInsertClick(scope.row)" type="text" size="small">添加子类</el-button>
                    <el-button type="text" @click="handleEditClick(scope.row)" size="small">编辑</el-button>
                    <el-button type="text" @click="handleDeleteClick(scope.row)" size="small">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog :title="isEdit?'修改分类':'添加分类'" :visible.sync="dialogCateVisible" width="40%" destroy-on-close @close="resetcateForm">
        <el-form :model="cateForm" ref="cateForm">
            <el-form-item label="分类" label-width="80px">
                <span v-if="isFather == true">顶部分类</span>
                <span v-else>{{cateForm.fatherName}}</span>
            </el-form-item>
            <el-form-item label="名称" label-width="80px">
                <el-input v-model="cateForm.name" placeholder="请输入名称"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogCateVisible = false">取 消</el-button>
            <el-button type="primary" @click="appProductAction">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import {
    categraylist,
    categrayadd,
    categrayupdate
} from '@/api/product';
import headTop from '@/components/headTop'
import {
    options
} from 'less';

export default {
    inject: ['reload'],
    data() {
        return {
            cateslist: [],
            options: [],
            currentItem: {},
            title: '新增分类',
            dialogCateVisible: false,
            isEdit: false,
            isFather: false,
            isDelete:false,
            cateForm: {}
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            try {
                const result = await categraylist();
                if (result.code == 200) {
                    this.options = result.data.data;
                }
            } catch (error) {

            }

        },

        appProductAction() {

            if (this.isFather) {
                this.cateForm.parentid = 0;
            }
            if (this.isEdit) {
                categrayupdate(this.cateForm).then((res) => {
                    if (res.code == 200) {
                        this.dialogCateVisible = false;
                        this.$message('成功');
                        this.getList();
                    } else {
                        this.$message('失败');
                    }
                });
            } else {
                categrayadd(this.cateForm).then((res) => {
                    if (res.code == 200) {
                        this.dialogCateVisible = false;
                        this.$message('成功');
                        this.getList();
                    } else {
                        this.$message('失败');
                    }
                });
            }

        },
        mapChildrenData(data) {
            return data.map(val => {
                let json = {};
                json.value = val.id;
                json.label = val.name;
                if (val.children) {
                    json.children = this.mapChildrenData(val.children);
                }
                return json
            })
        },
        clickTable(row, index, e) {
            this.$refs.refTable.toggleRowExpansion(row)
        },
        handleInsertClick(row) {
            this.isFather = false;
            this.dialogCateVisible = true
            console.log(row);
            this.cateForm = {};
            this.cateForm.fatherName = row.name;
            this.cateForm.parentid = row.id;
            // this.cateForm.name = '';
            // this.cateslist = [row];

        },
        handleAddClick() {
            this.isFather = true;
            this.dialogCateVisible = true

        },
        handleEditClick(row, prow) {
            console.log(row);
            this.isEdit = true;
            this.isFather = row.parentid == 0;
            this.dialogCateVisible = true
            this.cateForm = Object.assign({}, row);
            if (!this.isFather) {
            this.cateForm.fatherName = prow.name;
            }
        },
        handleDeleteClick(row) {
          let params = {
            'id':row.id
          };
          categraydelete(params).then((res) => {
                    if (res.code == 200) {
                        this.$message('成功');
                        this.getList();
                    } else {
                        this.$message('失败');
                    }
                });

        },
        resetcateForm() {

            this.$refs['cateForm'].resetFields();
        }

    },

    components: {
        headTop
    },
    render(h) {
        on: {
            click: e => {
                e.stopPropagation();
            }
        }
    }
}
</script>

<style lang="less">
@import "../../style/normal.less";

.buttons-content {
    margin: 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
}

.table-div {
    margin: 0 auto;
    padding: 0;
}

.list {
    margin: 10px;
    border: #eee 1px solid;
}

.list-content {
    display: block;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;

    li {
        width: 100%;
    }
}

.li-item {
    display: block;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    padding: 10px;
}

.top-button {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
}

.list-right-content {
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    padding: 10px;
    width: 20%;
}

li:hover {
    background-color: #00F5FF;
}

.li-selected {
    background-color: #00F5FF;
}

.li-normal {
    background-color: #ffffff;
}

.el-table--border th.gutter:last-of-type {
    display: block !important;
}
</style>
